<template>
	<div class="active">
		<div class="fixed">
			<div class="title flex">
				<div class="title_left">
					<img @click="back" src="../assets/image/return.png"/>
				</div>
				<div class="add">
					新用户注册
				</div>
				<div>
				</div>
			</div>

		</div>
		<div class="lists">
             <div class="top">
             	请输入手机号码
             </div>
			  <div class="inp" >
			  	<p>手机号</p>
			  	<input type="text" v-model="phone" placeholder="请输入手机号"/>
			  </div>
			   <div class="xieyi">
			   	<img v-if="flag=='1'" @click="check" src="../assets/image/tongyi.png"/>
			   	<img  v-if="flag=='2'"  @click="check" src="../assets/image/butongyi.png"/>
			   	<span>同意协议同意协议<span @click="skip_e" style="color: #007AFF;">《浪淘圈商家入驻协议》</span></span>
			   </div>
			  <div class="btns" @click="skipto_code">
			  	下一步
			  </div>
             
			</div>
		</div>

	</div>

</template>

<script>
	export default {
		data() {
			return {
				phone:'',
				flag:"1",
			}
		},
		//在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
		created: function() {
			var that=this;
			if(window.navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == 'micromessenger') {
				  localStorage.setItem("key",that.$route.query.key)
                  localStorage.setItem("store_id",that.$route.query.store_id)
			
			}else{
			 this.$message.error('请使用微信浏览器登录哦~');
		}
  
		},
		methods: {
			
			GetUrlParam(name) { //截取浏览器窗口的url中指定的某个字段
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
				var r = window.location.search.substr(1).match(reg);
				console.log(r)
				if(r != null) return unescape(r[2]);
				return  null;
			},
			back() {
				this.$router.go(-1)
			},
		    check(){
		    	if(this.flag == '1') {
				this.flag = '2'
			} else {
				this.flag = '1'
			}
		    	
		    },
		    skip_e(){
		    	this.$router.push({
					path: '/illustration'
				   });
		    },
			
			skipto_code(){
				var that=this;
				var str = /^1[3|5|4|8|7|9]\d{9}$/
				if(str.test(that.phone)) {} else {
				 this.$message.error('请输入正确手机号');
        
				return;
			}
				if(this.flag=="2"){
					 this.$message.error('请先同意入驻协议');
					 return;
				}
			
				localStorage.setItem("phone",that.phone)
					var qs = require('qs');
			that.$http.post(this.baseURL+"/index.php/waveguest/login/sms_send", qs.stringify({
						"store_mobile": that.phone,
				})).then(response => {
					console.log(response.data.data)
					if(response.status=="200"){
						 this.$message.success('短信验证码发送成功');
						this.$router.push({
					path: '/code'
				         });
					}else{
						 this.$message.error('短信验证码发送失败');
					}
						
						
					})
					.catch(error => {

					});
			
				
				
			},
			
		},
		mounted() {

		},
	}
</script>

<style>
.el-message {
    min-width: 4rem;
    top: 40% !important;
}
</style>
<style scoped="scoped">
	.active {
		
		position: fixed;
		top: 0;
		width: 100%;
		max-width: 640px;
		height: 100%;
	}
	.title_left {
		width: 0.67391rem;
		height: 0.67391rem;
	}
	
	.lists {
		padding: 2rem ;

	}
.title_left>img {
		width: 0.67391rem;
		height: 0.67391rem;
	}
	
	.title {
		width: 90%;
		padding: 0 5% 0 5%;
		height: 2rem;
		font-size: 0.7193rem;
		background: white;
		align-items: center;
	}
	
	.title div {
		width: calc(100%/3);
		align-items: center;
	}
	
	.title>div:nth-child(2) {
		text-align: center;
	}
	
	.inp{
		padding-top: 2rem ;
	}
	.inp>p{
		color: #D1D5D8;
		font-size: 0.562517rem;
		padding-bottom: 0.5rem;
	}
	.inp>input{
		width: 100%;
		height: 1.5rem;
		border: none;
		border-bottom: 1px solid gray; 
		font-size: 0.65217rem;
	}
	.btns{
		width: 100%;
		height: 2.1913rem;
		background:#007AFF;
		border-radius: 0.47826rem;
		text-align: center;
		line-height: 2.3913rem;
		color: white;
		font-size: 0.7826rem;
		margin-top: 6rem;
	}
	.top{
		    font-size: 0.91304rem;
	}
   .xieyi{
   	color: #D1D5D8;
   	font-size: 0.4347rem;
   	 	margin-top: 0.5rem;
   }
   .xieyi img{
   	width: 0.5217rem;
   	height: 0.5217rem;
  
   }
   
	
	
	
</style>